
// keep in sync with core/src/utilities/constants.js CSS_BREAKPOINTS.desktopMinWidth
$desktopMinWidth: 600px;

$fd-search-closed-control-body-width: 220px;

#lui-search-button {
  position: relative;
  z-index: 2;
}
.algolia-autocomplete {
  display: block !important;
}
.fd-search-input__closedcontrol {
  width: $fd-search-closed-control-body-width;
  &[aria-hidden="true"],
  &.is-hidden {
    width: $fd-search-closed-control-body-width;
  }
}
.algolia-autocomplete {
  .ds-dropdown-menu {
    margin-top: 10px;
  }
  
  .algolia-docsearch-suggestion--highlight {
    padding: 0em .05em;
  }

  .algolia-docsearch-footer {
    width: 100px;
    height: 15px;
  }

  .ds-dropdown-menu [class^=ds-dataset-] {
    max-height: 75vh;
    overflow-x: auto;
  }
}

@media screen and (max-width: 1024px) {
  .algolia-autocomplete {
    .ds-dropdown-menu {
      min-width: 360px;
    }
  }
}
@media screen and (max-width: ($desktopMinWidth - 1px)) {

  .algolia-autocomplete {
    
    &.algolia-autocomplete-left,
    &.algolia-autocomplete-right {
      .ds-dropdown-menu {
        position: fixed !important;
        top: 72px !important;
        left: 3vw !important;
        right: 3vw !important;
      }
    }

    &.algolia-autocomplete-left {
      .ds-dropdown-menu {
        &:before {
          left: 60vw;
        }
      }
    }

    &.algolia-autocomplete-right {
      .ds-dropdown-menu {
        &:before {
          right: 25vw;
        }
      }
    }

    .ds-dropdown-menu [class^=ds-dataset-] {
      max-width: 94vw;
    }
  }
}